<template>
  <div class="weather">
    <p>监测位置：<span>{{ props.position || '--' }}</span></p>
    <div class="content">
      <div class="card" v-for="v in state.list" :key="v.type">
        <img :src="iconMap.get(v.type)" alt="">
        <div class="right">
          <div class="value">{{ v.value }}</div>
          <div class="name">{{ v.name }}</div>
        </div>
      </div>
      <div></div>
    </div>

  </div>
</template>

<script setup>
import { defineProps, reactive } from 'vue';
import { getWeatherInfo } from '@/api/map'
import { onMounted } from 'vue';

const iconMap = new Map()
  .set('lux', require('@/assets/img/lux.png'))
  .set('humidity', require('@/assets/img/humidity.png'))
  .set('co2', require('@/assets/img/co2.png'))
  .set('tem', require('@/assets/img/tem.png'))
  .set('wind', require('@/assets/img/wind.png'))

const props = defineProps({
  deviceId: {
    require: true
  },
  position: {
    default () {
      return '--'
    }
  }
})

const state = reactive({
  list: [{}, {}, {}, {}, {}]
})

const getInfo = async () => {
  try {
    const res = await getWeatherInfo(props.deviceId)
    console.log(res.data[0]);
    state.list = [
      {
        type: 'lux',
        value: res.data[0].illumination || '--',
        name: '光照(Lux)',
      },
      {
        type: 'humidity',
        value: res.data[0].humidity || '--',
        name: '相对湿度(%)',
      },
      {
        type: 'co2',
        value: res.data[0].carbonDioxide || '--',
        name: '二氧化碳(ppm)',
      },
      {
        type: 'tem',
        value: res.data[0].temperature || '--',
        name: '温度(°C)',
      },
      {
        type: 'wind',
        value: res.data[0].windDirection || '--',
        name: '风向',
      },
    ]
  } catch (error) {
    console.error(error);
  }
}

onMounted(() => {
  getInfo()
})





</script>

<style lang="scss" scoped>
.weather {
  height: 100%;
  overflow: hidden;
}

p {
  font-size: 0.28rem;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #7E7E7E;
  line-height: 0.4rem;
  margin-bottom: 0.47rem;

  span {
    color: #1E1E1E;
  }
}

.content {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  .card {
    display: flex;
    align-items: center;
    margin-bottom: 0.74rem;

    &:nth-last-of-type(1) {
      margin-bottom: 0;
    }

    img {
      width: 0.8rem;
      height: 0.8rem;
      margin-right: 0.29rem;
    }

    .right {
      min-width: 1.58rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;

      .value {
        font-size: 0.44rem;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        color: #242424;
      }

      .name {
        font-size: 0.28rem;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #7E7E7E;
      }
    }
  }
}</style>